<template>
      <div class="goodsmanage">
        <el-card class="box-card">
            <el-input placeholder="根据商品名称搜索" v-model="proName" clearable @clear="reSearch"> </el-input>
            <el-select v-model="brandValue" placeholder="根据品牌搜索" clearable @clear="reSearch">
                <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
            <el-select v-model="catoryValue" placeholder="根据分类搜索" clearable @clear="reSearch">
                <el-option v-for="item in catoryList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
            <el-select v-model="typeValue" placeholder="根据商品类型搜索" clearable @clear="reSearch">
                <el-option v-for="item in allTypeList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
            <el-button type="primary" size="large" @click="clearAll">清空</el-button>
            <el-button type="primary" size="large" @click="search">搜索</el-button>
            <el-button type="primary" size="large" @click="addPro">添加商品</el-button>

            <!-- table表格部分 -->
            <el-table :data="tableData" style="width: 100%" border stripe>
                <el-table-column type="index" label="序号" align="center"></el-table-column>
                <el-table-column prop="thumbnail" label="缩略图" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.thumbnail" alt="" />
                    </template>
                </el-table-column>
                <el-table-column prop="code" label="商品编号" align="center"></el-table-column>
                <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
                <el-table-column prop="categoryName" label="分类名称" align="center"></el-table-column>
                <el-table-column prop="brandName" label="品牌名称" align="center"></el-table-column>
                <el-table-column prop="category" label="品牌类型" align="center" w136></el-table-column>
                <el-table-column prop="status" label="状态" align="center" width="73"></el-table-column>
                <el-table-column label="操作" width="167">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="downPro(scope.row)">{{
                            scope.row.status === '上架' ? '下架' : '上架'
                        }}</el-button>
                        <el-button type="primary" size="mini" @click="checkDetail(scope.row.id)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页区域 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
                :current-page="query.pagenum"
                :page-sizes="[20, 30, 50, 100]"
                :page-size="query.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageTotal"
            ></el-pagination>
            <!-- <el-button type="primary" style="margin-top: 5px" class="first">首页</el-button>
            <el-button type="primary" style="margin-top: 5px" class="first">上一页</el-button>
            <el-button type="primary" style="margin-top: 5px" class="first">下一页</el-button>
            <el-button type="primary" style="margin-top: 5px" class="first">尾页</el-button> -->
        </el-card>
    </div>
</template>

<script>
import { getGoodsList, getBrandsList, getcatoryList, getalltype, disablePro, enablePro } from '@/api/goods.js'
export default {
  name: 'goodsmanage',
  data () {
    return {
      proName: '',
      catoryValue: '',
      typeValue: '',
      brandValue: '',
      query: {
        pagenum: 1,
        pagesize: 50
      },
      pageTotal: 1,
      options: [],
      tableData: [],
      brandList: [],
      // 所有商品分类项
      catoryList: [],
      allTypeList: []
    }
  },
  created () {
    this.getGoodsList()
    this.getBrandsList()
    this.getallcatoryList()
    this.getAllType()
  },
  mounted () {

  },
  methods: {
    // 获取所有商品列表
    async getGoodsList () {
      const { Data } = await getGoodsList({
        pageSize: this.query.pagesize,
        pageIndex: this.query.pagenum,
        name: ''
      })
      this.tableData = Data.list
      console.log(Data)
    },

    // 获取所有品牌种类
    async getBrandsList () {
      const { Data } = await getBrandsList({
        pageIndex: 1,
        pageSize: 20,
        name: null
      })
      console.log(Data)
      this.brandList = Data.list
    },

    // 获取所有商品分类
    async getallcatoryList () {
      const { Data } = await getcatoryList()
      console.log(Data)
      this.catoryList = Data.list
    },

    // 获取所有商品类型
    async getAllType () {
      const { Data } = await getalltype()
      console.log(Data)
      this.allTypeList = Data.dictList
      // this.catoryList = Data.list
    },

    // 清空所有选项
    clearAll () {
      this.proName = ''
      this.catoryValue = ''
      this.typeValue = ''
      this.brandValue = ''
    },

    // 根据信息搜索
    async search () {
      const { Data } = await getGoodsList({
        pageIndex: this.query.pagenum,
        pageSize: this.query.pagesize,
        name: this.proName,
        brandID: this.brandValue,
        categoryID: this.catoryValue,
        goodscategory: this.typeValue
      })
      this.tableData = Data.list
      console.log(Data)
    },

    // 清空搜索项后就重新搜索
    async reSearch () {
      this.search()
    },
    // 添加商品
    addPro () {
      // 点击添加商品按钮以后, 跳转到新的页面
      this.$router.push('/commodityList/addgoods')
    },

    // 上架商品
    async downPro (role) {
      if (role.status === '下架') {
        const data = await enablePro({
          id: role.id
        })
        if (data.Message !== '') return this.$message.error('上架商品失败')
        this.$message.success('上架商品成功')
        // 更新成功后刷新列表
        this.getGoodsList()
      } else {
        const data = await disablePro({
          id: role.id
        })
        if (data.Message !== '') return this.$message.error('下架商品失败')
        this.$message.success('下架商品成功')
        // 更新成功后刷新列表
        this.getGoodsList()
      }
    },

    // 查看详情
    checkDetail (role) {
      // console.log(role)
      this.$router.push(`/commodityList/editgoods/${role}`)
    },

    // 分页的页数发生变化
    handlePageChange (val) {
      console.log(val)
    },

    // 每页显示的条数发生变化
    handleSizeChange () {

    }
  }
}
</script>

<style scoped>
.el-input {
    width: 150px;
    margin-right: 10px;
}

.el-select {
    margin-right: 5px;
}

.el-table {
    margin-top: 10px;
}

.el-pagination {
    display: inline-block;
}

.first {
    margin: 0 10px;
}

img {
    width: 100px;
    height: 100px;
}

</style>
